<template>
	<view class="managedUsage">
		<view class="navber" :style="{filter:fil}">
			<view class="useQK">
				<view class="back" @click="onClickLeft"><van-icon name="arrow-left" class="icon" /></view>
				<view class="title">
					<text>使用情况</text>
				</view>
				<view class="multipleChoice" @click="moreFn">多选</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view class="maskLayer"></view>
		<!-- 遮罩出现的按钮 -->
		<view class="allYmore" v-if="showMark">
			<van-checkbox v-model="checked" checked-color="#F7B500" @change="changeText">{{selectText}}</van-checkbox>
			<text style="margin-top: 6px;" @click="CancelFn">取消</text>
		</view>
		<view class="content">
			<ShopPro style="background-color: #38393a;width: 91%;margin: 0 auto;">
				<template v-slot:shopName>
					<view>{{SendBackPro.name}}</view>
				</template>
				<template v-slot:countNum>
					<view>*{{SendBackPro.quantity}}</view>
				</template>
				<template v-slot:countChange>
					<view>{{SendBackPro.price}}USDT</view>
				</template>
				<template v-slot:freight>
					<span>总额</span>
					<span class="textSize">{{SendBackPro.price + SendBackPro.freight}}USDT</span>
				</template>
				<template v-slot:needToPay>
					<span></span>
					<span></span>
				</template>
			</ShopPro>
			<!-- 托管列表 -->
			<view class="hostingList" :style="{height:hei}">
				<!-- 列表每一项 -->
				<view :class="showMark ===true ? 'itemHosting activeItem' : 'itemHosting'"
					:style="{border:item.colorStatus === false ? '2px solid transparent':'2px solid rgba(247, 181, 0, 1)'}"
					v-for="(item,index) in list" :key="index" @click="checkBorder(item.SID)">
					<view class="SIDcode">
						<image class="theLock" src="/static/images/Shop/icon-code@2x.png" mode=""></image>
						<!-- 后期传入的动态数据 -->
						<text class="text">设备SID码 {{item.SID}}</text>
						<!-- copy功能 -->
						<image class="copyPic" src="/static/images/Order/tracking_copy.png" mode=""></image>
					</view>
					<view class="vanButton">
						<van-button v-if="!item.status" class="atOnceHosting" color="#ffffff" :disabled="disableBtn"
							plain @click="showHasHosting(item.SID)">立即托管</van-button>
						<view class="inTrust" v-else>
							<van-button class="hasHosting" color="#00D0B9" plain>已托管</van-button>
							<text class="hostingTime">{{item.time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer" v-if="showBottomBtn">
			<view class="backBlur"></view>
			<van-button class="footerBtn" color="#4E47FF" @click="moreFn">立即托管</van-button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, computed } from 'vue'
	import ShopPro from '@/components/shopPro/index.vue'
	import { useStore } from 'vuex'
	import type { Product } from '../../utils/product.js'
	const store = useStore()
	const SendBackPro : Product = store.state.product
	// 托管列表数据
	const list = ref([
		{ SID: 'f8903ufn3s9c8', time: '2023年10月15日 00:33:06', status: false, colorStatus: false },
		{ SID: 'f8903ufn3s9c7', time: '2023年10月15日 00:33:06', status: false, colorStatus: false },
		{ SID: 'f8903ufn3s9c6', time: '2023年10月15日 00:33:06', status: false, colorStatus: false },
		{ SID: 'f8903ufn3s9c5', time: '2023年10月15日 00:33:06', status: true, colorStatus: false },
		{ SID: 'f8903ufn3s9c4', time: '2023年10月15日 00:33:06', status: true, colorStatus: false },
		{ SID: 'f8903ufn3s9c3', time: '2023年10月15日 00:33:06', status: true, colorStatus: false }
	])
	// 多选与全选
	let checked = ref<boolean>(false);
	let showMark = ref<boolean>(false)
	let selectText = ref<string>('全选')
	// let borderColor = ref<string>('2px solid transparent')
	let disableBtn = ref<boolean>(false)
	// 高斯模糊
	let fil = ref<string>('blur(0)')
	const moreFn = () => {
		showMark.value = true
		fil.value = 'blur(3px)'
		disableBtn.value = true
		if (showMark.value === true) {
			console.log('请选择托管的设备')
			list.value.forEach(item => {
				if (item.colorStatus === true) {
					item.status = true
					item.colorStatus = false
					console.log('托管成功')
				}
			})
		}
		// console.log(fil.value)
	}
	const CancelFn = () => {
		showMark.value = false
		fil.value = 'blur(0)'
		disableBtn.value = false
		list.value.forEach(item => {
			item.colorStatus = false
		})
	}
	// 全选功能
	const changeText = (e : boolean) => {
		// console.log(e)
		if (e === true) {
			selectText.value = '已全选'
			list.value.forEach(item => {
				if (item.status === false) {
					item.colorStatus = true
				}
			})
		} else {
			selectText.value = '全选'
			list.value.forEach(item => {
				if (item.status === false) {
					item.colorStatus = false
				}
			})
		}
	}
	// 改变边框
	const checkBorder = (id : string) => {
		if (showMark.value === true) {
			list.value.some(item => {
				if (item.SID === id) {
					if (item.status === false) {
						item.colorStatus = !item.colorStatus
					}
				}
			})
		}
	}
	const showHasHosting = (id : any) => {
		list.value.forEach(item => {
			if (item.SID === id) {
				item.status = true
			}
		})
	}
	// 计算底部按钮是否改出现
	let arrStatus = []
	let hei = ref<string>('68vh')
	const showBottomBtn = computed(() => {
		list.value.forEach(item => {
			if (!item.status) {
				// 将没有被托管的订单存入一个数组
				arrStatus.push(item)
			}
		})
		if (arrStatus.length >= 3) {
			console.log(arrStatus.length)
			hei.value = '60vh' // 按钮出来，更改列表高度
			return true
		}
	})
	const onClickLeft = () => uni.navigateBack()
</script>

<style scoped lang="scss">
	::v-deep .van-checkbox__label {
		color: #F7B500;
		margin-top: 12px;
	}

	::v-deep .van-checkbox {
		display: flex;
		align-items: center;
		height: 88px;
	}

	.activeItem {
		background: rgba(210, 208, 255, 0.2) !important;
	}

	::v-deep .van-icon {
		line-height: 32px;
		width: 32px;
		height: 32px;
	}

	::v-deep .van-icon-success {
		border: 1px solid rgba(247, 181, 0, 1);
	}

	.atOnceHosting {
		display: block;
		width: 160px;
		height: 64px;
		margin: 0 auto;
		border-radius: 8px;
		background: none;
	}

	.hasHosting {
		background: none;
		border-radius: 20px;
	}

	.managedUsage {
		position: relative;
		width: 100%;
		height: 100vh;
		color: #fff;

		.navber {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 88px;
			font-size: 36px;
			// filter: blur(3px);

			.useQK {
				height: 88px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}

			// filter: blur(0);

			.back {
				margin-left: 36px;
			}

			.multipleChoice {
				font-size: 28px;
				margin-right: 32px;
			}
		}

		.allYmore {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
			width: 91%;
			// height: 88px;
			font-size: 36px;
			// margin: 0 auto;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 28px;
		}

		.maskLayer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
			background: rgba(0, 0, 0, 0.7);
		}

		.content {
			width: 100%;
			padding-top: 120px;

			.textSize {
				font-size: 32px;
				font-weight: bold;
			}

			.hostingList {
				width: 91%;
				// height: 60vh;
				overflow-y: scroll;
				margin: 40px auto 0 auto;

				.itemHosting {
					width: 99%;
					height: 184px;
					background: rgb(56, 57, 58);
					border-radius: 16px;
					margin-bottom: 32px;
					border: 2px solid transparent;

					.SIDcode {
						display: flex;
						flex-direction: row;
						align-items: center;
						width: 91%;
						height: 80px;
						margin: 0 auto;

						.theLock {
							width: 28px;
							height: 37px;
							// margin: 22px 0 0 0;
						}

						.text {
							font-size: 28px;
							margin: 0 8px 0 34px;
						}

						.copyPic {
							width: 30px;
							height: 30px;
						}
					}

					.vanButton {
						// width: 100%;
						width: 91%;
						height: 64px;
						margin: 16px auto 0 auto;

						.inTrust {
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							margin-left: 68px;

							text {
								font-size: 24px;
								color: rgba(255, 255, 255, 0.5);
							}
						}
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 168px;
			// background: red;
			display: flex;
			align-items: center;
			// z-index: 1;

			.backBlur {
				position: absolute;
				bottom: 0;
				left: 0;
				z-index: 0;
				width: 100%;
				height: 100%;
				background: #000000;
				filter: blur(5px);
				opacity: 0.8;
			}

			.footerBtn {
				display: block;
				margin: 0 auto;
				width: 43%;
				height: 88px;
				border-radius: 16px;
			}
		}
	}
</style>